<template>
	<view class="">
		<view class="uni-padding-wrap">
			<uni-segmented-control :current="current" :values="items" :style-type="styleType" :active-color="activeColor" @clickItem="onClickItem" />
		</view>
		<view v-show="current == 0">
			<view class="select-box"><sun-dropDown v-on:onSubmitAddress="onSubmitAddress"></sun-dropDown></view>
			<view class="dates-box ">
				<view style="width: 100%;" class="dates f-row-between">
					<view
						class="date f-center" 
						:style="{ width: 100 / 5 - 3 + '%' }"
						:class="selected == 'd' ? 'selected' : ''"
						@click="selected = 'd'"
					>
						今日
					</view>
					<view
						class="date f-center"
						:style="{ width: 100 / 5 - 3 + '%' }"
						:class="selected == 'zr' ? 'selected' : ''"
						@click="selected = 'zr'"
					>
						昨日
					</view>
					<view
						class="date f-center"
						:style="{ width: 100 / 5 - 3 + '%' }"
						:class="selected == 'z' ? 'selected' : ''"
						@click="selected = 'z'"
					>
						本周
					</view>
					<view
						class="date f-center"
						:style="{ width: 100 / 5 - 3 + '%' }"
						:class="selected == 'm' ? 'selected' : ''"
						@click="selected = 'm'"
					>
						本月
					</view>
					<view
						class="date f-center"
						:style="{ width: 100 / 5 - 1.5 + '%' }"
						:class="selected == 'zdy' ? 'selected' : ''"
						@click="selected = 'zdy'"
					>
						自定义
					</view>
				</view>
				<sun-Dates  :selected="selected" :showDate="true" @onSubmit="onSubmitDate"></sun-Dates>
				</view>
			<!-- chart-box shop.vue -->
			<view class="chart-box">
				<view class="money-block f-center">
					<view class="money-item f-column-WHcenter">
						<view><label class="title">收银合计</label></view>
						<view class="money f-row-Wcenter">
							<label>￥</label>
							<label>{{ resData.salepay.salepaycount.pay_amt.numder | toFIex }}</label>
							<label class="unit">{{ resData.salepay.salepaycount.pay_amt.unit || '' }}</label>
						</view>
					</view>
				</view>
			</view>
			<view class="tietle-box"><sun-tietleBox :tietleData="'收银员统计'" :showLine="false"></sun-tietleBox></view>
			<view :id="idTopHeight" class="table-box f-column" :style="{ padding: 0 + ' ' + tableMargin + 'rpx' }">
				<!-- 撑满屏幕 -->
				<!-- :height="topHeight - (tableMargin * 2) +'rpx'" -->
				<wyb-table
					ref="table"
					:width="'710rpx'"
					:defaultColWidth="defaultColWidth"
					:headers="headers"
					:contents="resData.salepay.list"
					:header-bg-color="'#128A80'"
					:header-ft-color="'#ffffff'"
					:loading="false"
					:first-line-fixed="false"
					:maxHeight="topHeight - tableMargin * 2 + 'rpx'"
					:min-height="[65, 50]"
					:urlCol="urlCol"
				/>
				<view class="toastTitle">{{ query2.toastTitle }}</view>
			</view>
		</view>
		<view v-show="current == 1">
			<view class="select-box"><sun-dropDown v-on:onSubmitAddress="onSubmitAddress1"></sun-dropDown></view>
			<view class="dates-box ">
				<view style="width: 100%;" class="dates f-row-between">
					<view
						class="date f-center" 
						:style="{ width: 100 / 5 - 3 + '%' }"
						:class="selected == 'd' ? 'selected' : ''"
						@click="selected = 'd'"
					>
						今日
					</view>
					<view
						class="date f-center"
						:style="{ width: 100 / 5 - 3 + '%' }"
						:class="selected == 'zr' ? 'selected' : ''"
						@click="selected = 'zr'"
					>
						昨日
					</view>
					<view
						class="date f-center"
						:style="{ width: 100 / 5 - 3 + '%' }"
						:class="selected == 'z' ? 'selected' : ''"
						@click="selected = 'z'"
					>
						本周
					</view>
					<view
						class="date f-center"
						:style="{ width: 100 / 5 - 3 + '%' }"
						:class="selected == 'm' ? 'selected' : ''"
						@click="selected = 'm'"
					>
						本月
					</view>
					<view
						class="date f-center"
						:style="{ width: 100 / 5 - 1.5 + '%' }"
						:class="selected == 'zdy' ? 'selected' : ''"
						@click="selected = 'zdy'"
					>
						自定义
					</view>
				</view>
				<sun-Dates  :selected="selected" :showDate="true" @onSubmit="onSubmitDate"></sun-Dates>
			</view>
			<!-- chart-box shop.vue -->
			<view class="chart-box">
				<view class="money-block f-center">
					<view class="money-item f-column-WHcenter">
						<view><label class="title">收银合计</label></view>
						<view class="money f-row-Wcenter">
							<label>￥</label>
							<label>{{ resData.operpay.operpaycount.pay_amt.numder | toFIex }}</label>
							<label class="unit">{{ resData.operpay.operpaycount.pay_amt.unit || '' }}</label>
						</view>
					</view>
				</view>
			</view>
				<scroll-view scroll-x="true" class="pay-box">
					<view class="money-item f-column-WHcenter" :class="item.selected ? 'selected':''" v-for="(item,index) in resData.operpay.dataType" @click="onOperpayDataType(item,index)" >
						{{item.pay_name}}
					</view>
				</scroll-view>
			<view class="tietle-box"><sun-tietleBox :tietleData="'收款明细'" :showLine="false"></sun-tietleBox></view>
			<view :id="idTopHeight1" class="table-box f-column" :style="{ padding: 0 + ' ' + tableMargin + 'rpx' }">
				<!-- 撑满屏幕 -->
				<!-- :height="topHeight - (tableMargin * 2) +'rpx'" -->
				<wyb-table
					ref="table2"
					:width="'710rpx'"
					:defaultColWidth="defaultColWidth1"
					:headers="headers1"
					:contents="resData.operpay.list"
					:header-bg-color="'#128A80'"
					:header-ft-color="'#ffffff'"
					:loading="false"
					:first-line-fixed="false"
					:maxHeight="topHeight1 - tableMargin * 2 + 'rpx'"
					:min-height="[65, 50]"
				/>
				<view class="toastTitle">{{ query2.toastTitle }}</view>
			</view>
		</view>
		<view v-show="current == 2">
			<view class="select-box f-row-Hcenter f-row-between">
				<sun-dropDown style="width: 90%;" v-on:onSubmitAddress="onSubmitAddress2"></sun-dropDown>
				<view class="shaixuan icons iconshaixuanguolv" @click="open(['slide-right'])"></view>
			</view>
			<view class="dates-box ">
				<view style="width: 100%;" class="dates f-row-between">
					<view
						class="date f-center" 
						:style="{ width: 100 / 5 - 3 + '%' }"
						:class="selected == 'd' ? 'selected' : ''"
						@click="selected = 'd'"
					>
						今日
					</view>
					<view
						class="date f-center"
						:style="{ width: 100 / 5 - 3 + '%' }"
						:class="selected == 'zr' ? 'selected' : ''"
						@click="selected = 'zr'"
					>
						昨日
					</view>
					<view
						class="date f-center"
						:style="{ width: 100 / 5 - 3 + '%' }"
						:class="selected == 'z' ? 'selected' : ''"
						@click="selected = 'z'"
					>
						本周
					</view>
					<view
						class="date f-center"
						:style="{ width: 100 / 5 - 3 + '%' }"
						:class="selected == 'm' ? 'selected' : ''"
						@click="selected = 'm'"
					>
						本月
					</view>
					<view
						class="date f-center"
						:style="{ width: 100 / 5 - 1.5 + '%' }"
						:class="selected == 'zdy' ? 'selected' : ''"
						@click="selected = 'zdy'"
					>
						自定义
					</view>
				</view>
				<sun-Dates  :selected="selected" :showDate="true" @onSubmit="onSubmitDate"></sun-Dates>
			</view>
			<!-- chart-box shop.vue -->
			<view class="chart-box">
				<view class="money-block f-row-between">
					<view
						class="money-item f-column-WHcenter"
						v-for="(val, key, i) in resData.apppayup.apppayuprec"
						:key="key"
						v-if="key != 'length'"
						:style="{ backgroundImage: resData.apppayup.apppayuprec[key].backgroundImage, width: 100 / resData.apppayup.apppayuprec.length - 4 + '%' }"
					>
						<view>
							<label class="title">{{ resData.apppayup.apppayuprec[key].name }}</label>
						</view>
						<view class="money f-row-Wcenter">
							<label>￥</label>
							<label>{{ resData.apppayup.apppayuprec[key].numder | toFIex }}</label>
							<label class="unit" v-if="resData.apppayup.apppayuprec[key].sourceNumder > 1000 && -1000 < resData.apppayup.apppayuprec[key].sourceNumder">
								{{ resData.apppayup.apppayuprec[key].name == '显示%' ? '%' : resData.apppayup.apppayuprec[key].unit }}
							</label>
						</view>
					</view>
				</view>
			</view>
			<view class="tietle-box"><sun-tietleBox :tietleData="'交班列表'" :showLine="false"></sun-tietleBox></view>
			<view :id="idTopHeight2" class="table-box f-row-Wcenter" :style="{ padding: 0 + ' ' + tableMargin + 'rpx' }">
				<!-- 撑满屏幕 -->
					<scroll-view
						:scroll-top="scrollTop"
						:scroll-y="true"
						class="scroll-Y"
						:style="{ height: topHeight2 + 'rpx', maxHeight: topHeight2 - tableMargin * 2 + 'rpx' }"
						@scrolltolower="lower"
					>
						<view class="apppayup-item" v-for="(item, index) in resData.apppayup.list" :key="index">
							<view class="top f-row-between f-row-Hcenter">
								<view class=" f-column">
									<view class="line f-row-Hcenter">
										<label>收银员：</label>
										<label>{{ item.oper_name }}</label>
									</view>
									<view class="line f-row-Hcenter">
										<label>收银合计：</label>
										<label>{{ item.sale_amt }}</label>
									</view>
								</view>
								<view class=" f-column">
									<view class="line f-row-Hcenter">
										<label>实交金额：</label>
										<label>{{ item.up_amt }}</label>
									</view>
									<view class="line f-row-Hcenter">
										<label>应交金额：</label>
										<label>{{ item.fact_amt }}</label>
									</view>
								</view>
							</view>
							<view class="bottom f-row-between f-row-Hcenter">
								<view class="lfet f-row-Hcenter">
									<label>交班时间：</label>
									<label>{{ item.end_date | yyyy_MM_dd }}</label>
								</view>
								<view class="right f-center " @click="toPage(item)">
									<label class="det vertical-align: text-bottom">单据详情</label>
									<view class="icons iconarrow-right f-row-Hcenter vertical-align: text-bottom"></view>
								</view>
							</view>
						</view>
						<view class="toastTitle">{{ query2.toastTitle }}</view>
					</scroll-view>
			</view>
		</view>
		<!-- 遮罩 -->
		<uni-transition :mode-class="['fade']" :styles="maskClass" :show="show" />
		<!-- 过渡 -->
		<uni-transition :duration="200" :mode-class="modeClass" :styles="transfromClass" :show="transShow" @change="change">
			<view class="transfromClass-box">
				<view class="money-block">
					<view class="money-item" :class="item.selected ? 'selected':''" v-for="(item, index) in resData.apppayup.dataType" :index="index" @click="onTap(item,index)">{{ item.oper_name }}</view>
				</view>
				<view style="width: 100%;" class="btn-Block f-center">
					<view class="btn-left f-center" @click="onCancelAppsale">取消</view>
					<view class="btn-right f-center" @click="onSubmitAppsale">确定</view>
				</view>
			</view>
		</uni-transition>
	</view>
</template>

<script>
import sunDropDown from '@/components/sun-dropDown/sun-dropDown.vue';
import sunDates from '@/components/sun-Dates/sun-Dates.vue';
import wybTable from '@/components/wyb-table/wyb-table.vue';
import sunTietleBox from '@/components/sun-titleBox/sun-tietleBox.vue';
import api_server from '@/api/api_server.js';
export default {
	components: {
		wybTable,
		sunDates,
		sunDropDown,
		sunTietleBox
	},
	data() {
		return {
			selected : 'd',
			//遮罩
			show: false,
			transShow: false,
			modeClass: ['fade'],
			maskClass: {
				position: 'fixed',
				bottom: 0,
				top: 0,
				left: 0,
				right: 0,
				'background-color': 'rgba(0, 0, 0, 0.4)'
			},
			transfromClass: {
				position: 'fixed',
				bottom: 0,
				top: 0,
				left: 0,
				right: 0,
				/* #ifndef APP-NVUE */
				display: 'flex',
				/* #endif */
				'justify-content': 'center'
				// 'align-items': 'center'
			},
			//分段
			items: ['收银统计', '支付统计', '交班统计'],
			current: 0,
			colorIndex: 0,
			activeColor: '#128A80', //选中的标签背景色与边框颜色
			styleType: 'button',

			//表格高度变量
			idTopHeight: 'table-box',
			idTopHeight1: 'table-box2',
			idTopHeight2: 'list-box',
			tableMargin: 20,
			topHeight: 100,
			topHeight1: 100,
			topHeight2: 100,
			//平分表宽
			defaultColWidth: 167,
			defaultColWidth1: 167,
			//定义头部字段
			headers: [
				{
					label: '收银员',
					key: 'oper_name'
				},
				{
					label: '收银金额',
					key: 'pay_amt'
				}
			],
			headers1: [
				{
					label: '收款方式',
					key: 'pay_name'
				},
				{
					label: '收银员',
					key: 'oper_name'
				},
				{
					label: '收款金额',
					key: 'pay_amt'
				}
			],
			urlCol: [
				{
					type: 'route',
					key: 'pay_amt'
				},
				{
					type: 'http',
					key: 'link'
				}
			],
			//数据
			resData: {
				salepay: {
					salepaycount: {
						pay_amt: {
							numder: 0
						}
					},
					list: []
				},
				operpay: {
					dataType: [
						{
							pay_name: "全部"
						},
						{"softid":884821,"pay_id":2,"pay_name":"现金","pay_type":0},{"softid":884821,"pay_id":3,"pay_name":"威支付","pay_type":1},{"softid":884821,"pay_id":4,"pay_name":"微信","pay_type":2},{"softid":884821,"pay_id":5,"pay_name":"支付宝","pay_type":3},{"softid":884821,"pay_id":6,"pay_name":"金卡","pay_type":4},{"softid":884821,"pay_id":7,"pay_name":"积分支付","pay_type":5}
					],
					operpaycount: {
						pay_amt: {
							numder: 0
						}
					},
					list: [],
					total: {}
				},
				apppayup: {
					dataType: [
					],
					dataType1: [
						{
							oper_name: "全部"
						}
					],
					apppayuprec: {
						sale_amt: {
							numder: 0,
							name: '收银合计',
							backgroundImage: 'linear-gradient(to top right, RGBA(151, 214, 226, 1), RGBA(85, 210, 184, 1))'
						},
						up_amt: {
							numder: 0,
							name: '应交合计',
							backgroundImage: 'linear-gradient(to top right, rgba(141, 186, 253, 1.0), RGBA(143, 108, 244, 1))'
						},
						fact_amt: {
							numder: 0,
							name: '实交合计',
							backgroundImage: 'linear-gradient(to top right, RGBA(249, 197, 150, 1), RGBA(241, 121, 142, 1))'
						},
						length: 3
					},
					list: []
				}
			},
			//查询
			query: {
				branch_jg: '%', //机构 支持%为全部机构
				start_date: 10000000,
				end_date: 10000000,
				oper_no: '%', // varchar(4) 收银员 默认传%表示全部
				ischange: true, // 是 bool 请求参数是否修改，如果为false证明文档中的参数没修改，就不查询count，反之查询新的count

				pageindex: 1, // 是 int 页号
				pagesize: 999999, // 是 int 页大小 如果想一次性查询全部时，此参传入999999
				toastTitle: '',
				totalPage: 1 //总页码(前端算)
			},
			query1: {
				branch_jg: '%', //机构 支持%为全部机构
				start_date: 10000000,
				end_date: 10000000,
				oper_no: '%', // varchar(4) 收银员 默认传%表示全部
				ischange: true, // 是 bool 请求参数是否修改，如果为false证明文档中的参数没修改，就不查询count，反之查询新的count

				pageindex: 1, // 是 int 页号
				pagesize: 999999, // 是 int 页大小 如果想一次性查询全部时，此参传入999999
				toastTitle: '',
				totalPage: 1 //总页码(前端算)
			},
			query2: {
				branch_jg: '%', //机构 支持%为全部机构
				start_date: 10000000,
				end_date: 10000000,
				oper_no: '%', // varchar(4) 收银员 默认传%表示全部
				ischange: true, // 是 bool 请求参数是否修改，如果为false证明文档中的参数没修改，就不查询count，反之查询新的count

				pageindex: 1, // 是 int 页号
				pagesize: 8, // 是 int 页大小 如果想一次性查询全部时，此参传入999999
				toastTitle: '',
				totalPage: 1 //总页码(前端算)
			},
			page: '/pages/collectMoney/collectMoneyDet',
			tmpItemAppsale : {}
		};
	},
	onReady() {
		//计算两个表列的平均宽度
		this.$util.getDefaultColWidth(this, 710, 'headers', 'defaultColWidth');
		this.$util.getDefaultColWidth(this, 710, 'headers1', 'defaultColWidth1');
		this.getAppSalePayUpOperList();
		this.getPayInfoList();
	},
	computed: {
		userInfo() {
			let userInfo = this.$store.getters.getUserInfo;
			userInfo.wxUser = userInfo.wxUser ? userInfo.wxUser : {};
			return userInfo;
		}
	},
	methods: {
		onOperpayDataType(item,index){
			this.resData.operpay.dataType.forEach(item =>{
				item.selected = false;
			})
			this.resData.operpay.dataType[index].selected = true;
			this.query1.pay_id = item.pay_id;
			this.getlogin();
		},
		//确认/取消操作员
		onCancelAppsale(){
			this.transShow = this.show = false;
		},
		onSubmitAppsale(){
			let tmpItem = this.tmpItemAppsale;
			this.transShow = this.show = false;
			delete this.query2.oper_no;
			this.query2.oper_no = tmpItem.oper_id || '%';
			this.query2.oper_name = tmpItem.oper_name;
			this.query2.pageindex = 1;
			
			this.getlogin();
		},
		open(mode) {
			this.show = true;
			this.modeClass = mode;
			this.transShow = !this.transShow;
		},
		onTap(item , index) {
			this.tmpItemAppsale = item;
			this.resData.apppayup.dataType.forEach(item =>{
				item.selected = false;
			})
			this.resData.apppayup.dataType[index].selected = true;
		},
		change(e) {
			console.log(e.detail);
		},
		toPage(item) {
			this.$util.navigateTo({
				url: '/pages/collectMoney/exchangeDet?data=' + JSON.stringify(item)
			});
		},
		// 下拉刷新
		lower: function(e) {
			this.query2.pageindex++;
			if (this.query2.pageindex > this.query2.totalPage) {
				return;
			}
			this.query2.toastTitle = '加载中...';

			this.getlogin('more');
		},
		//点击分段
		onClickItem(e) {
			this.current = e.currentIndex;
			this.getlogin();
		},
		//选择分店
		onSubmitAddress(e) {
			this.query.branch_jg = e.address.branch_no;
			this.query.branch_name = e.address.branch_name;
			this.getlogin();
		},
		onSubmitDate(e) {
			this.query = { ...this.query, ...e };
			this.getlogin();
		},
		//选择分店
		onSubmitAddress1(e) {
			this.query1.branch_jg = e.address.branch_no;
			this.query1.branch_name = e.address.branch_name;
			this.getlogin();
		},
		onSubmitDate1(e) {
			this.query1 = { ...this.query1, ...e };
			this.getlogin();
		},
		//选择分店
		onSubmitAddress2(e) {
			this.query2.branch_jg = e.address.branch_no;
			this.query2.branch_name = e.address.branch_name;
			this.getAppSalePayUpOperList();
			this.getlogin();
		},
		onSubmitDate2(e) {
			
			this.query2 = { ...this.query2, ...e };
			this.getAppSalePayUpOperList();
			this.getlogin();
		},
		
		//交班操作员列表
		getAppSalePayUpOperList() {
			this.$api_server.dwzy_GetAppSalePayUpOperList({
				data: this.query2,
				success: res => {
					if (res.data) {
					   this.resData.apppayup.dataType = [...this.resData.apppayup.dataType1 ,...res.data.data] ;
					}
				}
			});
		},
		//支付类型列表
		getPayInfoList(){
			this.$api_server.dwzy_GetPayInfoList({
				data: this.query1,
				success: res => {
					if (res.data) {
					   this.resData.operpay.dataType = [...this.resData.operpay.dataType ,...res.data.data] ;
					}
				}
			});
		},
		getlogin(isMore) {
			if (this.current == 0) {
				if (this.query.branch_jg == '') {
					this.query.branch_name = this.userInfo.branch_name;
					this.query.branch_jg = this.userInfo.branch_default;
				}
				let query = this.query;
				this.$api_server.dwzy_GetAppSalePayAnalysis({
					data: query,
					success: res => {
						if (res.data) {
							//收银合计
							let salepaycount = res.data.data.salepaycount;
							let item1 = this.$util.moneyUnit(salepaycount.pay_amt);
							salepaycount.pay_amt = item1;
							this.resData.salepay.salepaycount = salepaycount;

							let page = '/pages/collectMoney/payDet';
							let query = this.query;

							res.data.data.salepaylist.forEach(function(item) {
								item.pay_amt = [item.pay_amt, page, { ...item, ...query }];
							});
							if (this.query.pageindex == 1) {
								this.resData.salepay.list = res.data.data.salepaylist;
							} else {
								this.resData.salepay.list = [...this.resData.salepay.list, ...res.data.data.salepaylist];
							}
							//计算三个一屏剩余高度
							this.$util.getTopHeight(this, this.idTopHeight, this.tableMargin);
							//
							let listlength = this.resData.salepay.list.length;
							let totalCount = salepaycount.rec_tot;
							this.query.totalPage = Math.ceil(totalCount / this.query.pagesize);
							if (isMore) {
								if (listlength > 0) {
									if (listlength <= totalCount) {
										this.query.toastTitle = '没有更多了!';
									} else {
										this.query.toastTitle = '加载更多...';
									}
								} else {
									this.query.toastTitle = '没有更多了!';
								}
							} else {
								if (listlength <= totalCount) {
									this.query.toastTitle = '没有更多了!';
								}
								
							}
						}
					},
					fail(error) {
						console.log('rerror>>>', error);
					}
				});
			} else if (this.current == 1) {
				if (this.query1.branch_jg == '') {
					this.query1.branch_name = this.userInfo.branch_name;
					this.query1.branch_jg = this.userInfo.branch_default;
				}

				let query = this.query1;
				this.$api_server.dwzy_GetAppOperPayAnalysis({
					data: query,
					success: res => {
						if (res.data) {
							//收银合计
							let operpaycount = res.data.data.operpaycount;
							let item1 = this.$util.moneyUnit(operpaycount.pay_amt);
							operpaycount.pay_amt = item1;
							this.resData.operpay.operpaycount = operpaycount;

							if (this.query1.pageindex == 1) {
								this.resData.operpay.list = res.data.data.operpaylist;
							} else {
								this.resData.operpay.list = [...this.resData.operpay.list, ...res.data.data.operpaylist];
							}
							this.$util.getTopHeight(this, this.idTopHeight1, this.tableMargin, 'topHeight1');

							let listlength = this.resData.operpay.list.length;
							let totalCount = operpaycount.rec_tot;
							this.query1.totalPage = Math.ceil(totalCount / this.query1.pagesize);
							if (isMore) {
								if (listlength > 0) {
									if (listlength <= totalCount) {
										this.query1.toastTitle = '没有更多了!';
									} else {
										this.query1.toastTitle = '加载更多...';
									}
								} else {
									this.query1.toastTitle = '没有更多了!';
								}
							} else {
								if (listlength <= totalCount) {
									this.query1.toastTitle = '没有更多了!';
								}
								
							}
						}
					},
					fail(error) {
						console.log('rerror>>>', error);
					}
				});
			} else if (this.current == 2) {
				if (this.query2.branch_jg == '') {
					this.query2.branch_name = this.userInfo.branch_name;
					this.query2.branch_jg = this.userInfo.branch_default;
				}

				let query = this.query2;
				this.$api_server.dwzy_GetAppSalePayUpAnalysisTotal({
					data: query,
					success: res => {
						if (res.data) {
							//收银合计
							let apppayuprec = res.data.data.apppayuprec;
							for (let key in this.resData.apppayup.apppayuprec) {
								if (apppayuprec[key]) {
									this.resData.apppayup.apppayuprec[key] = { ...this.resData.apppayup.apppayuprec[key], ...this.$util.moneyUnit(apppayuprec[key]) };
								}
							}
							if (this.query2.pageindex == 1) {
								this.resData.apppayup.list = res.data.data.apppayuplist;
							} else {
								this.resData.apppayup.list = [...this.resData.apppayup.list, ...res.data.data.apppayuplist];
							}
							this.$util.getTopHeight(this, this.idTopHeight2, this.tableMargin, 'topHeight2');

							let listlength = this.resData.apppayup.list.length;
							let totalCount = apppayuprec.rec_tot;
							this.query2.totalPage = Math.ceil(totalCount / this.query2.pagesize);
							if (isMore) {
								if (listlength > 0) {
									if (listlength <= totalCount) {
										this.query2.toastTitle = '没有更多了!';
									} else {
										this.query2.toastTitle = '加载更多...';
									}
								} else {
									this.query2.toastTitle = '没有更多了!';
								}
							} else {
								if (listlength <= totalCount) {
									this.query2.toastTitle = '没有更多了!';
								}
							}
						}
					},
					fail(error) {
						console.log('rerror>>>', error);
					}
				});
			}
		}
	}
};
</script>

<style scoped lang="scss">
@charset "UTF-8";

.uni-padding-wrap {
	margin-top: 20upx;
	padding: 0px 30upx;
}

.select-box {
	padding: 0 20upx;
	.shaixuan {
		margin-left: 10upx;
		box-sizing: border-box;
		background: rgba(255, 255, 255, 1);
		border-radius: 10upx;
		font-size: 45upx;
		padding: 10upx;
	}
}

.dates-box {
	margin: 0 20upx;
	padding: 20upx;
	border-radius: 10upx;
	background-color: rgba($color: #ffffff, $alpha: 1);
}

.tietle-box {
	margin: 0 20upx;
}

.dates-box {
	background-color: #fcfdfd;
	padding: 20upx 30upx 20upx 30upx;
	border-radius: 15upx 15upx 0 0;

	.uni-margin-wrap {
		margin: 20upx;

		// background-color: #0A98D5;
		.swiper {
			height: 30upx;
			min-width: 300upx;
		}
	}

	.dates {
		width: 520upx;
	}

	.date {
		width: 120upx;

		padding: 0 15upx;
		height: 51upx;
		border: 1upx solid #d7d7d7;
		border-radius: 100upx;

		font-size: 30upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
	}
}

.chart-box {
	margin: 0 20upx;
	padding: 0 20upx;
	border-radius: 0 0 15upx 15upx;
	background-color: #fcfdfd;

	.money-block {
		width: 100%;
		border-top: 1rpx solid #d7d7d7;
		padding: 20upx 0upx;

		.money-item {
			width: 100%;
			height: 160upx;
			border-radius: 10upx;
			box-shadow: 2rpx 2rpx 15rpx rgba(224, 32, 32, 0.2);
			background-image: linear-gradient(to top right, RGBA(151, 214, 226, 1), RGBA(85, 210, 184, 1));

			.money {
				width: 100%;
			}

			label:nth-of-type(1) {
				height: 30upx;
				font-size: 30upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #fcfdfd;
				line-height: 62upx;
			}

			label:nth-of-type(2) {
				font-size: 40upx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #fcfdfd;
			}

			.unit {
				height: 38upx;
				font-size: 40upx;
				font-family: Source Han Sans CN;
				font-weight: 600;
				color: #fcfdfd;
			}

			.title {
				height: 24upx;
				font-size: 20upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #fcfdfd;
			}
		}

		.money-item:nth-of-type(1) {
			background-color: red;
			background-image: linear-gradient(to top right, RGBA(151, 214, 226, 1), RGBA(85, 210, 184, 1));
		}
	}
}

.table-box {
		.scroll-Y {
			.apppayup-item {
				padding: 20upx;
				margin: 10upx 0;
				border-radius: 15upx;
				background: rgba(255, 255, 255, 1);
				.top {
					.line {
						label {
							&:nth-of-type(1) {
								width: 151upx;
								text-align: right;
							}
						}
					}
				}
				.bottom {
					margin-top: 10upx;
					padding-top: 10upx;
					border-top: 1px solid rgba(225, 225, 225, 0.9);
					.det {
						&:nth-of-type(1) {
							font-size: 26upx;
							line-height: 28upx;
							color: rgba(170, 170, 255, 1);
						}
					}
					.right {
						.iconarrow-right {
							margin-left: 10upx;
							color: rgba(170, 170, 255, 1);
							font-size: 22upx;
							line-height: 28upx;
						}
					}
				}
			}
		}
	
}
.toastTitle {
	width: 100%;
	text-align: center;
	color: rgba(216, 216, 216, 0.9);
}
.transfromClass-box {
	width: 90%;
	border-radius: 10upx;
	margin-top: 10upx;
	padding: 20upx;
	display: inline-table;
	background: rgba(255, 255, 255, 1);
	.selected{
		background: rgba(85, 170, 127, 0.9);
		color:  rgba(255, 255, 255, 0.9);;
	}
	.money-item {
		box-sizing: border-box;
		height: 60upx;
		line-height: 60upx;
		border-radius: 20upx;
		padding: 0 10upx;
		margin: 10upx;
		border: 1px solid rgba(162, 162, 184, 0.9);
		display: inline-block;
	}
	.btn-Block {
		border: 0px;
		width: 100%;
		padding: 20upx;
		.btn-left {
			width: 250upx;
			height: 80upx;
			border-radius: 10upx;
			color:  rgba(0, 189, 0, 0.8);
			background-color: rgba(170, 255, 255, 1.0);
			background-image: linear-gradient(to top right, rgba(241, 240, 240, 1.0), rgba(238, 238, 238, 1.0));
			margin-right: 30upx;
		}
	
		.btn-right {
			width: 250upx;
			height: 80upx;
			border-radius: 10upx;
			color: rgba(255, 255, 250, 1.0);
			background-color: rgba(195, 195, 0, 1);
			background-image: linear-gradient(to top right, rgba(0, 180, 0, 0.8), rgba(0, 188, 0, 0.8));
		}
	}
}

.pay-box{
	box-sizing: border-box;
	margin: 20upx;
	padding: 20upx;
	border-radius: 10upx;
	background: rgba(255,255,255,1);
	width: 95%;
	white-space: nowrap;
	.money-item{
		margin: 20upx;
		padding: 20upx;
		display: inline-block;
		border-radius: 10upx;
		border: 1px solid rgba(162, 162, 184, 0.9);
		box-shadow: 2rpx 2rpx 15rpx rgba(224, 32, 32, 0.1);
		
	}
	.selected{
		background: rgba(85, 170, 127, 0.9);
		color:  rgba(255, 255, 255, 0.9);;
	}
}
</style>
